@charset "utf-8";
@function r($px){
    @return ($px/40)*1rem;
}
@function px($px){
    @return ($px/2)*1px;
}
.loadPage{
    width: 100%;
    height: 100%;
    background: url(../img/loadBack.jpg) no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
//  display: none;
    
    .pleaseWearEarBox{
        width: r(259);
        height: r(198);
        position: absolute;
        transform-origin: bottom right;
        top: 90vh;
        left: 20vw;
        animation-name:pleaseWearEarBox;
        animation-duration:0.8s;
        animation-timing-function:linear;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .loadPercentage{
        position: absolute;
        top: 90vh;
        left: 5vw;
        
        span{
            font-size: r(20);
            font-family: arial;
            color: white;
        }
    }
}
.startPage{
    width: 100%;
    height: 100%;
//  background: url(../img/startpage.jpg) no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: none;
    .startPageBackBox{
        width: 100%;
        height:100%;
        
        animation-name:startPageBackBox;
        animation-duration:1s;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        
//      animation: startPageBackBox 1s infinite  ;
        
        img{
            width: 100%;
            height: 100%;
        }
    }
    .KuGouLogBox{
        width: r(226);
        height: r(58);
        position: absolute;
        transform-origin: left top;
        top: 3vh;
        left: 65vw;
        z-index: 1;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .startPageHeadBox{
        width: r(692);
        height: r(353);
        position: absolute;
        transform-origin: left top;
        top: 9vh;
        left: 3vw;
        z-index: 1;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .mouthBox{
        width: r(689);
        height: r(486);
        position: absolute;
        transform-origin: center top;
        top: 30vh;
        left: 3vw;
        animation-name:mouthBox;
        animation-duration:1s;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .whatSongBox{
        width: r(226);
        height: r(136);
        position: absolute;
        transform-origin: left top;
        top: 44vh;
        left: 38vw;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .man_leftBox{
        width: r(362);
        height: r(461);
        position: absolute;
        transform-origin: left top;
        top: 50vh;
        left: 3vw;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .man_right{
        width: r(352);
        height: r(465);
        position: absolute;
        transform-origin: left top;
        top: 56vh;
        left: 52vw;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .index_startBox{
        width: r(392);
        height: r(130);
        position: absolute;
        transform-origin: center center;
        top: 86vh;
        left: 24vw;
        animation-name:index_startBox;
        animation-duration:1s;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
//答题部分
.answerBox{
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
    //第一页
    .muscPage1{
        width: 100%;
        height: 100%;
        background: url(../img/musicPage1.jpg) no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        display: none;
        .movieHitSongBox{
            width: r(659);
            height: r(222);
            position: absolute;
            transform-origin: left top;
            top: 5vh;
            left: 0vw;
            animation-name:movieHitSongBox;
            animation-duration:0.5s;
            animation-delay:0.8s;
            animation-timing-function:linear;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .movieHitSongpeopleBox{
            width: r(666);
            height: r(575);
            position: absolute;
            transform-origin: left top;
            top: 20vh;
            left: 8vw;
            animation-name:movieHitSongpeopleBox;
            animation-delay:0.5s;
            animation-duration:0.5s;
            animation-fill-mode: forwards;
            animation-timing-function:linear;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .movieHitSongCityWallBox{
            width: r(750);
            height: r(337);
            position: absolute;
            transform-origin: left top;
            top: 56vh;
            left: 0vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
        
        
               
    }
    .muscPage2Box{
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
        display: none;
        .muscPage2{
            width: 100%;
            height: 100%;
            animation-name:startPageBackBox;
            animation-duration:1s;
            animation-timing-function:linear;
            animation-iteration-count:infinite;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .lightearthBox{
            width: r(652);
            height: r(237);
            position: absolute;
            transform-origin: left top;
            top: 1vh;
            left: 8vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .musicPage2PeopleBox{
            width: r(750);
            height: r(537);
            position: absolute;
            transform-origin: left top;
            top: 20vh;
            left: 0vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .songerBox{
            width: r(513);
            height: r(642);
            position: absolute;
            transform-origin: center center;
            top: 11vh;
            left: 20vw;
            opacity: 0;
            animation: songerBox 0.5s 1s forwards linear,songerBox2 1s 0.5s forwards linear infinite alternate;
//          animation-name:songerBox;
//          animation-delay:0.5s;
//          animation-duration:1s;
//          animation-fill-mode: forwards;
//          animation-timing-function:linear;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    
    //第三页
    .muscPage3{
        width: 100%;
        height: 100%;
        background: url(../img/musicPage1.jpg) no-repeat;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
        display: none;
        .lightearthBox{
            width: r(652);
            height: r(237);
            position: absolute;
            transform-origin: left top;
            top: 1vh;
            left: 8vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .jianfeizaodeBox{
            width: r(426);
            height: r(629);
            position: absolute;
            transform-origin: left top;
            top: 11.3vh;
            left: 35.2vw;
            opacity: 0;
            animation-name:musicPage3PeopleBox;
            animation-delay:0.5s;
            animation-duration:0.5s;
            animation-fill-mode: forwards;
            animation-timing-function:linear;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .feiZhaoBox{
            width: r(220);
            height: r(92);
            position: absolute;
            transform-origin: left top;
            top: 61.4vh;
            left: 9.6vw;
            opacity: 0;
            animation-name:feiZhaoBox;
            animation-delay:1s;
            animation-duration:0.3s;
            animation-fill-mode: forwards;
            animation-timing-function:linear;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .sangBan1Box{
            width: r(421);
            height: r(352);
            position: absolute;
            transform-origin: left top;
            top: 27vh;
            left: 0vw;
            z-index: 1;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .sangBan2Box{
            width: r(421);
            height: r(352);
            position: absolute;
            transform-origin: left top;
            top: 35vh;
            left: 43vw;
            z-index: 1;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .watchpeosBox{
            width: r(725);
            height: r(532);
            position: absolute;
            transform-origin: left top;
            top: 11vh;
            left: 0vw;
            opacity: 0;
            animation-name:watchpeosBox;
            animation-delay:1s;
            animation-duration:1s;
            animation-fill-mode: forwards;
            animation-timing-function:linear;
            img{
                width: 100%;
                height: 100%;
            }
        }
        
       
    }
    //第4页
    .muscPage4{
        width: 100%;
        height: 100%;
        background: url(../img/musicPage4.jpg) no-repeat;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
        display: none;
       .car2Box{
            width: r(753);
            height: r(684);
            position: absolute;
            transform-origin: center center;
            top: 9.4vh;
            left: 0vw;
            opacity: 0;
            animation: car2Box1 0.5s 1s forwards linear,car2Box2 1s 0.5s forwards linear infinite alternate;

            img{
                width: 100%;
                height: 100%;
            }
        }
        .roseBox{
            width: r(171);
            height: r(194);
            position: absolute;
            transform-origin: left top;
            top: 26vh;
            left: 78vw;
            opacity: 0;
            animation:roseBox 1s 1.5s forwards linear infinite;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    //第5页
    .muscPage5{
        width: 100%;
        height: 100%;
        background: url(../img/musicPage5.jpg) no-repeat;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
        display: none;
       .juhualeftBox{
            width: r(243);
            height: r(316);
            position: absolute;
            transform-origin: center center;
            top:33vh;
            left: 4.8vw;
            animation: juhualeftBox 0.5s 1s forwards linear,car2Box2 1s 0.5s forwards linear infinite alternate;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .juhuarightBox{
            width: r(200);
            height: r(328);
            position: absolute;
            transform-origin: center center;
            top: 31.8vh;
            left: 70vw;
            animation: juhuarightBox 0.5s 1s forwards linear,car2Box2 1s 0.5s forwards linear infinite alternate;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    //第6页
    .muscPage6{
        width: 100%;
        height: 100%;
        background: url(../img/musicPage6.jpg) no-repeat;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
        display: none;
       .manBox{
            width: r(725);
            height: r(486);
            position: absolute;
            transform-origin: left top;
            top:26.5vh;
            left: 3.7vw;
            animation-name:manBox;
            animation-delay:0.6s;
            animation-duration:0.5s;
            animation-fill-mode: forwards;
            animation-timing-function:linear;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .wogeiyouBox{
            width: r(507);
            height: r(325);
            position: absolute;
            transform-origin: left top;
            top:1.7vh;
            left: 1.2vw;
            animation-name:wogeiyouBox;
            animation-delay:1s;
            animation-duration:1s;
            animation-fill-mode: forwards;
            animation-timing-function:linear;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
  
    //选项
    .selectABox{
            position: absolute;
            width: r(525);
            height: r(111);
            transform-origin: left top;
            top: 67vh;
            left: 5vw;
//          text-align: center;
            display: none;
            .selectA{
                width: 100%;
                height: 100%;
                position: relative;           
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            >span{
                position: absolute;
                top:50% ;
                display: inline-block;
                width: 100%;
                text-align: center;
                
                margin-top: r(-19);
                font-size: r(38);
            }
        }
        .selectBBox{
            width: r(513);
            height: r(113);
            position: absolute;
            transform-origin: left top;
            top: 78vh;
            left: 5vw;
            display: none;
            .selectB{
                width: 100%;
                height: 100%;
                position: relative;           
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            >span{
                display: inline-block;
                width: 100%;
                text-align: center;
                position: absolute;
                top:50% ;
                margin-top: r(-19);
                font-size: r(38);
            }
        }
    .selectCBox{
        width: r(531);
        height: r(113);
        position: absolute;
        transform-origin: left top;
        top: 88vh;
        left: 5vw;
        display: none;
        .selectC{
            width: 100%;
            height: 100%;
            position: relative;           
            img{
                width: 100%;
                height: 100%;
            }
        }
        >span{
            display: inline-block;
            width: 100%;
            text-align: center;
            position: absolute;
            top:50% ;
            margin-top: r(-19);
            font-size: r(38);
        }
    }
    .mouthMiniBox{
            width: r(135);
            height: r(136);
            position: absolute;
            transform-origin: left top;
            top: 65vh;
            left: 78vw;
            background: url(../img/mouthMini.png) no-repeat;
            background-size: 100% 100%;
            text-align: center;
            display: none;
            >span{
                font-size: r(38);
                line-height: r(136);
            }
    }
    //提示框
    .mesBox{
        display: none;
        width: r(340);
        height: r(102);
        position: absolute;
        left: 29.3vw;
        top: 9.7vh;
        background: black;
        text-align: center;
        color: yellow;
        line-height: r(102);
        z-index: 10;
        font-weight: bold;
//      animation-name:manBox;
//      animation-delay:0.6s;
//      animation-duration:0.5s;
//      animation-fill-mode: forwards;
//      animation-timing-function:linear;
    }
}

//结果页
.resultPage{
        width: 100%;
        height: 100%;
        background: url(../img/user_bg.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
        display: none;
        .userMsgBox{
            width: r(294);
            height: r(108);
            position: absolute;
            transform-origin: left top;
            top: 1.4vh;
            left: 2.3vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .huangjingBox{
            width: r(231);
            height: r(269);
            position: absolute;
            transform-origin: left top;
            top: 10vh;
            left: 35.5vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .resultCountBox{
            width: r(340);
            height: r(102);
            position: absolute;
            transform-origin: left top;
            top: 31.7vh;
            left: 29.5vw;
            .resultCount{
                width: 100%;
                height: 100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            >span{
                display: inline-block;
                width: 100%;
                text-align: center;
                position: absolute;
                top:50% ;
                margin-top: r(-19);
                font-size: r(38);
            }
            
        }
       .quoteBox{
            width: r(709);
            height: r(200);
            position: absolute;
            transform-origin: left top;
            top: 41vh;
            left: 3vw;
            .quote{
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            >span{
                display: block;
                width: r(615);
                left: r(40);
                position: absolute;
                text-align: center;
                top:r(50) ;
                font-size: r(32);
            }
        }
        .againBox{
            width: r(305);
            height: r(114);
            position: absolute;
            transform-origin: left top;
            top: 60vh;
            left: 5.6vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .shareBox{
            width: r(346);
            height: r(112);
            position: absolute;
            transform-origin: left top;
            top: 60vh;
            left: 51.1vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .paihangbangBox{
            width: r(685);
            height: r(282);
            position: absolute;
            transform-origin: left top;
            top: 75.3vh;
            left: 5.6vw;
            .paihangbang{
               img{
                    width: 100%;
                    height: 100%;
                } 
            }
            .paihangbangText{
                width: r(677-90);
                margin: 0 auto;
                position: absolute;
                background: transparent;
                top: r(45);
                padding: 0 r(45);

            }
            
        }
        .paiming_titleBox{
            width: r(418);
            height: r(119);
            position: absolute;
            transform-origin: left top;
            top: 68.8vh;
            left: 23vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
}